import { EndlessCanvas } from './EndlessCanvas';

export default (scene: EndlessCanvas) => {
  const DRAG_SENSITIVITY = 0.3;
  const dragStartPoint = { x: 0, y: 0 };
  let isDragging = false;
  let clickTimeout;

  const contextMenu = document.createElement('div');
  contextMenu.style.position = 'absolute';
  contextMenu.style.display = 'none'; // Скрыто по умолчанию, будет показано позже
  contextMenu.style.zIndex = '1000';
  contextMenu.style.backgroundColor = '#f0f0f0';
  contextMenu.style.padding = '10px';
  contextMenu.style.borderRadius = '5px';
  contextMenu.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
  contextMenu.style.flexDirection = 'column'; // Вертикальное расположение элементов
  contextMenu.style.display = 'flex'; // Используем flexbox

  const settingsButton = document.createElement('button');
  settingsButton.textContent = 'Настройки';
  settingsButton.onclick = () => {
    console.log('Открытие настроек...');
    contextMenu.style.display = 'none';
  };

  const choiceButton = document.createElement('button');
  choiceButton.textContent = 'Выбор';
  choiceButton.onclick = () => {
    console.log('Выбор...');
    contextMenu.style.display = 'none';
  };

  contextMenu.appendChild(settingsButton);
  contextMenu.appendChild(choiceButton); // Добавляем кнопку "Выбор" под кнопкой "Настройки"
  document.body.appendChild(contextMenu);

  const updateCursor = (cursorStyle) => {
    scene.input.setDefaultCursor(cursorStyle);
  };

  const showContextMenu = (pointer) => {
    contextMenu.style.display = 'flex'; // Убедимся, что flex применяется каждый раз
    contextMenu.style.flexDirection = 'column';
    contextMenu.style.left = `${pointer.event.clientX}px`;
    contextMenu.style.top = `${pointer.event.clientY}px`;
  };

  const startDragging = (pointer) => {
    clearTimeout(clickTimeout);
    if (!isDragging) {
      dragStartPoint.x = pointer.x;
      dragStartPoint.y = pointer.y;
      isDragging = true;
      updateCursor('grab');
    }
  };

  const stopDragging = () => {
    if (isDragging) {
      isDragging = false;
      updateCursor('default');
    }
  };

  scene.input.on('pointerdown', (pointer) => {
    if (pointer.button === 2) {
      // Правая кнопка мыши
      clickTimeout = setTimeout(() => {
        startDragging(pointer);
      }, 200); // Начать перетаскивание, если кнопка зажата дольше 200 мс
    }
  });

  scene.input.on('pointerup', (pointer) => {
    if (pointer.button === 2) {
      clearTimeout(clickTimeout);
      if (!isDragging) {
        // Если кнопка была отпущена до начала перетаскивания, показать контекстное меню
        showContextMenu(pointer);
      }
      stopDragging();
    }
  });

  scene.input.on('pointermove', (pointer) => {
    if (isDragging) {
      const { x, y } = pointer;
      const dragX = x - dragStartPoint.x;
      const dragY = y - dragStartPoint.y;
      scene.cameras.main.scrollX -= dragX * DRAG_SENSITIVITY;
      scene.cameras.main.scrollY -= dragY * DRAG_SENSITIVITY;
      dragStartPoint.x = x;
      dragStartPoint.y = y;
    }
  });

  // Скрыть контекстное меню при любом клике вне его
  document.addEventListener('click', (event) => {
    //@ts-ignore
    if (!contextMenu.contains(event.target)) {
      contextMenu.style.display = 'none';
    }
  });

  // Предотвратить стандартное контекстное меню браузера
  document.addEventListener('contextmenu', (event) => event.preventDefault());
};
